<template>
  <div class="container">
    <div class="item1">
      <span @click="mine_action_click({ id: 'mine' })">
        <el-avatar
          class="avatar"
          :src="$store.state.userInfo.avatar | imgSrc"
        ></el-avatar>
      </span>
      <span class="nickname">{{ userInfo.nickname }}</span>
      <!-- <img class="level" src="../../assets/images/mine/level-card.png" @click="mine_action_click({id: 'hy'})"> -->
      <span
        class="level"
        @click="govip"
        :class="$store.state.userInfo.vip_level < 2 ? 'lv-1' : 'lv-2'"
        >{{
          $store.state.userInfo.vip_level < 2 ? t("银卡会员") : t("金卡会员")
        }}</span
      >
      <div class="bottom">
        <div class="left">
          <span class="t1">{{ t("升级至金卡会员") }}</span>
          <span class="t2">{{ t("折扣") }}</span>
        </div>
        <router-link class="right" tag="div" to="/">{{
          t("去下单")
        }}</router-link>
      </div>
    </div>
    <div class="item2">
      <span class="head">{{ t("我的") }}</span>
      <div class="list">
        <div
          class="img-txt"
          v-for="(item, index) in mine_actions"
          :key="index"
          @click="mine_action_click(item)"
        >
          <img class="img" :src="item.img" alt="" srcset="" />
          <span class="txt">{{ item.txt }}</span>
        </div>
      </div>
    </div>
    <div class="item3">
      <span class="head">{{ t("我的订单") }}</span>
      <div class="content">
        <div class="order-action-list">
          <div
            v-for="(item, index) in order_actions"
            :key="index"
            @click="mine_action_click(item)"
          >
            <div class="img-txt">
              <img :src="item.img" alt="" srcset="" />
              <span class="txt" v-if="item.txt">{{ item.txt }}</span>
            </div>
          </div>
        </div>
        <div class="order-list" v-if="false">
          <div class="order-detail">
            <img class="cover" src="" alt="" srcset="" />
            <div class="order-info">
              <span class="order-txt">您的订单正在出库，请耐心等待</span>
              <span class="order-status">物流公司 | 2023-12-12 15:00:00</span>
            </div>
            <div class="actions">
              <span class="a1">{{ t("查看详情") }}</span>
              <el-divider direction="vertical"></el-divider>
              <span class="a2">{{ t("物流跟踪") }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="item4">
      <div class="card" @click="mine_action_click({ id: 'zpk' })">
        <span class="head">{{ t("作品库") }}</span>
        <div class="content">
          <span class="num">10</span>
          <span class="title">{{ t("我的作品") }}</span>
        </div>
      </div>
      <div class="card">
        <span class="head">{{ t("购物车") }}</span>
        <div class="content">
          <span class="num">{{ user.cart_num }}</span>
          <span class="title">{{ t("加购商品") }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapMutations } from "vuex";
import code_box from "@/components/codeInvite.vue";
import { getUserInfo } from "@/utils/api";
export default {
  data() {
    return {
      user: {},
    };
  },
  computed: {
    mine_actions() {
      return [
        {
          id: "yhq",
          txt: this.t("优惠券"),
          img: require("@/assets/images/mine/mine-icon-1.png"),
        },
        {
          id: "wdqb",
          txt: this.t("我的钱包"),
          img: require("@/assets/images/mine/mine-icon-2.png"),
        },
        {
          id: "wdyhk",
          txt: this.t("我的银行卡"),
          img: require("@/assets/images/mine/mine-icon-3.png"),
        },
        {
          id: "yqm",
          txt: this.t("邀请码"),
          img: require("@/assets/images/mine/mine-icon-4.png"),
        },
        {
          id: "kfzx",
          txt: this.t("客服中心"),
          img: require("@/assets/images/mine/mine-icon-5.png"),
        },
        {
          id: "shdz",
          txt: this.t("收货地址"),
          img: require("@/assets/images/mine/mine-icon-6.png"),
        },
      ];
    },
    order_actions() {
      return [
        {
          id: "dfk",
          txt: this.t("待付款"),
          img: require("@/assets/images/mine/order-icon-1.png"),
        },
        {
          id: "dfh",
          txt: this.t("待发货"),
          img: require("@/assets/images/mine/order-icon-2.png"),
        },
        {
          id: "dsh",
          txt: this.t("待收货"),
          img: require("@/assets/images/mine/order-icon-3.png"),
        },
        {
          id: "tk",
          txt: this.t("退款/售后"),
          img: require("@/assets/images/mine/order-icon-4.png"),
        },
        {
          id: "sydd", //所有订单
          txt: "",
          img: require("@/assets/images/mine/right.png"),
        },
      ];
    },
    userInfo() {
      return this.$store.state.userInfo;
    },
  },
  mounted() {
    getUserInfo().then((res) => {
      if (res.code == 1) {
        this.SET_USER(res.data);
        this.user = res.data;
      }
    });
  },
  methods: {
    /**
     * 简化翻译方法(少写property)
     * @param {String} v 最后一个key值
     */
    t(v) {
      return this.$t(`我的页面.${v}`);
    },
    // 跳转到vip页面
    govip() {
      if (this.$store.state.userInfo.vip_level < 2) {
        this.$router.push("/svip");
      } else {
        this.$router.push("/ssvip");
      }
    },
    mine_action_click(item) {
      // console.log(item);
      if (item.id == "yqm") {
        const h = this.$createElement;
        this.$msgbox({
          title: this.t("我的邀请码"),
          message: h(code_box, { props: { value: this.user.invite_code } }),
          showConfirmButton: false,
          callback: (res) => {
            console.log(res);
          },
        });
      } else if (item.id == "wdyhk") {
        this.$router.push("bankCard");
      } else if (item.id == "shdz") {
        this.$router.push({
          name: "address",
          query: {
            aside: 1,
          },
        });
      } else if (item.id == "wdqb") {
        this.$router.push("myWallet");
      } else if (item.id == "yhq") {
        this.$router.push("coupon");
      } else if (item.id == "zpk") {
        this.$router.push("worksLibrary");
      } else if (item.id == "hy") {
        this.$router.push("member");
      } else if (item.id == "sydd") {
        this.$router.push({
          name: "order",
          query: {
            type: "0",
          },
        });
      } else if (item.id == "dfk") {
        this.$router.push({
          name: "order",
          query: {
            type: "1",
          },
        });
      } else if (item.id == "dfh") {
        this.$router.push({
          name: "order",
          query: {
            type: "2",
          },
        });
      } else if (item.id == "dsh") {
        this.$router.push({
          name: "order",
          query: {
            type: "3",
          },
        });
      } else if (item.id == "tk") {
        this.$router.push({
          name: "order",
          query: {
            type: "5",
          },
        });
      } else if (item.id == "mine") {
        this.$router.push({
          name: "accountPerson",
          query: {
            aside: 0,
          },
        });
      }
    },
    ...mapMutations(["SET_USER"]),
  },
};
</script>
<style lang="less" scoped>
::v-deep .el-table__row td {
  border: none !important;
}
::v-deep .el-table .cell {
  margin-top: 25px !important;
}
::v-deep .el-input__inner {
  width: 270px;
  height: 55px;
  background: #f1f1f1;
  border-radius: 10px;
}
::v-deep .btn {
  width: 80px;
  height: 55px;
  background: #000000;
  border-radius: 10px;
  padding: 0;
  line-height: 55px;
  text-align: center;
}
.container {
  padding: 28px 110px 50px;
  display: grid;
  grid-template-areas:
    "a b b b b"
    "c c c d d";
  grid-gap: 20px;
  background: #f9f9f9;

  .item1 {
    box-sizing: border-box;
    width: 500px;
    height: 264px;
    grid-area: a;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: #fff;

    .avatar {
      margin-top: 30px;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: #fff;
    }

    .nickname {
      margin-top: 15px;
      color: #222;
      font-size: 18px;
      font-weight: 500;
    }

    .level {
      margin-top: 10px;
      width: 90px;
      line-height: 30px;
      text-align: center;
      font-size: 16px;
      border-radius: 30px;
      color: #222;
    }

    .lv-1 {
      background: linear-gradient(0deg, #bfc3d0 0%, #e3e6ec 100%);
    }

    .lv-2 {
      background: linear-gradient(0deg, #d4b071 0%, #ecd6af 100%);
    }
    .bottom {
      margin-top: 15px;
      padding: 13px 20px 11px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: row;
      background: #fbf4e8;
      box-sizing: border-box;

      .left {
        display: flex;
        flex-direction: column;
        color: #222;

        .t1 {
          font-size: 18px;
        }

        .t2 {
          font-size: 16px;
          margin-top: 10px;
        }
      }

      .right {
        font-size: 16px;
        background: #ffe8c5;
        padding: 0px 20px;
        height: 30px;
        line-height: 30px;
        border-radius: 30px;
        cursor: pointer;
        user-select: none;
      }
    }
  }

  .item2 {
    width: 1180px;
    height: 264px;
    grid-area: b;
    background: #fff;
    display: flex;
    flex-direction: column;

    .list {
      margin-top: 50px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-direction: row;
    }
  }

  .item3 {
    grid-area: c;
    background: #fff;
    width: 1200px;
    .content {
      margin: 30px 50px 0px;

      .order-action-list {
        padding: 60px 0px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: row;
        background: #f8f8f8;
      }

      .order-list {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
        padding: 11px;
        padding-right: 30px;
        background: #f1f1f1;

        .order-detail {
          width: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-direction: row;

          .cover {
            width: 78px;
            height: 78px;
          }

          .order-info {
            margin-left: 20px;
            flex: 1;
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            flex-direction: column;

            .order-txt {
              color: #333;
              font-size: 16px;
            }

            .order-status {
              margin-top: 20px;
              color: #666;
              font-size: 16px;
            }
          }

          .actions {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-direction: row;
            font-size: 16px;

            .a1 {
              color: #ff5757;
            }

            .a2 {
              color: #0042ff;
            }
          }
        }
      }
    }
  }

  .item4 {
    grid-area: d;
    background: #f9f9f9;
    display: grid;
    row-gap: 20px;

    .card {
      background: #fff;
      width: 480px;
      height: 302px;
      .content {
        padding: 70px 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .num {
          color: #ff5757;
          font-size: 50px;
        }

        .title {
          margin-top: 30px;
          color: #000;
          font-size: 18px;
        }
      }
    }
  }

  .head {
    display: block;
    padding: 18px 32px 16px;
    color: #000;
    font-size: 18px;
    font-weight: bold;
    line-height: 38px;
  }

  .img-txt {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .img {
      width: 44px;
      height: 44px;
    }

    .txt {
      margin-top: 26px;
      color: #333;
      font-size: 16px;
    }
  }
}
</style>
<style>
.el-message-box__close {
  font-size: 30px;
}
.el-message-box {
  box-sizing: border-box;
  width: 500px !important;
  height: 300px !important;
  padding: 30px;
}
.el-message-box__title {
  font-family: Source Han Sans SC;
  font-weight: 500;
  font-size: 20px;
  color: #000000;
}
.c {
  margin-top: 30px;
}
</style>
